<template>
  <div class="home">
    <div class="title">
      放点啥呢
      <el-button @click="statistic">随便</el-button>
    </div>


    <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>

      <el-table-column prop="orderNum" label="订单号" >
      </el-table-column>
      <el-table-column prop="goodsId" label="物品编号"></el-table-column>
      <el-table-column prop="sellerId" label="卖家"></el-table-column>
      <el-table-column prop="userId" label="买家"></el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
      </el-table-column>
    </el-table>


    <!-- <div class="scroll" id="scroll">
      <el-table :data="tableData" style="width: 100%" :max-height="maxHeight">
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column prop="state" label="状态" align="center" />
        <el-table-column prop="city" label="城市" align="center" />
        <el-table-column prop="address" label="住址" align="center" />
        <el-table-column label="Operations" align="center">
          <template #default>
            <el-button link type="primary" size="small" @click="handleClick">
              编辑
            </el-button>
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-drawer v-model="table" title="特定的标题" direction="rtl" size="70%">
        <div
          id="myChart"
          style="width: 600px; height: 400px"
          ref="myChart"
        ></div>
      </el-drawer>
    </div> -->

    <!-- <div class="home-container">
      <el-container class="layout-container">
        <el-aside width="200px" class="aside">
          <div class="aside-title">慧心医问</div>
          <div class="aside-sccroller">
              <el-menu background-color='rgb(48,65,86)' text-color="#fff">
                <el-menu-item index="1">
                  <router-link to='/userinfo'>用户信息</router-link>
                </el-menu-item>
                <el-menu-item index="2">
                  <router-link to='/qa'>问答</router-link>
                </el-menu-item>
                <el-menu-item index="3">
                  <router-link to='/time'>时间</router-link>
                </el-menu-item>
                <el-menu-item index="4">
                  <router-link to='/feedback'>反馈</router-link>
                </el-menu-item>
              </el-menu>
          </div>
        </el-aside>
        <el-container>
          <el-main>
            <el-scrollbar>
              <el-table :data="tableData">
                <el-table-column prop="date" label="Date" width="140" />
                <el-table-column prop="name" label="Name" width="120" />
                <el-table-column prop="address" label="Address" />
              </el-table>
            </el-scrollbar>
          </el-main>
        </el-container>
      </el-container>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      maxHeight: "",
      table: false,
      tableData: [
        {
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
        },
      ],
    };
  },
  created() {
    this.maxHeight = window.innerHeight * 0.95 - 100;
  },
  methods: {
    statistic() {
      this.table = true;
      this.initEcharts();
    },
    initEcharts() {
      this.$nextTick(() => {
        const dom = this.$refs["myChart"];
        console.log(dom);
        if (dom) {
          console.log("ll");
          const myChart = this.$echarts.init(dom); // 初始化echarts实例
          const option = {
            xAxis: {
              type: "category",
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: "line",
                smooth: true,
              },
            ],
          };
          // 设置实例参数
          option && myChart.setOption(option);
        }
      });
    },
  },
};
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    height: 100px;
  }
  .scroll {
    width: 100%;
  }
}
</style>
